<template>
  <div>
    <header>
      <van-nav-bar title="修改地址">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
      </van-nav-bar>
    </header>
    <van-address-edit
      :area-list="areaList"
      show-set-default
      show-delete
      show-area
      :address-info="AddressInfo"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { addressList, deleteAddress ,updateAddress} from "../api/user";
import Vue from "vue";
import { AddressEdit, Area, Toast } from "vant";

Vue.use(AddressEdit);
Vue.use(Area);
Vue.use(Toast);

export default {
  data() {
    return {
      areaList,
      AddressInfo: {},
    };
  },
  computed: {},
  methods: {
    onSave(content) {
        console.log(content);
        updateAddress({addressid:content.addressid,userid:localStorage.getItem("userid"),name:content.name,tel:content.tel,province:content.province,city:content.city,county:content.county,addressDetail:content.addressDetail,isDefault:content.isDefault}).then(res=>{
            console.log(res);
        if (res.data.code == 200) {
          Toast("更新成功");
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
        })
    },
    onDelete() {
      deleteAddress({ addressid: this.$route.params.addressid }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast("删除成功");
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    },
  },
  created() {
    console.log(this.$route.params.addressid);
    addressList({ userid: localStorage.getItem("userid") }).then((res) => {
      console.log(res.data.data);
      if (res.data.code == 200) {
        this.AddressInfo = res.data.data.filter(
          (item) => item.addressid == this.$route.params.addressid
        )[0];
      }
    });
  },
};
</script>

<style scoped>
.nextbtn {
  width: 80%;
  margin: 0.1rem auto;
}
</style>